<template>
  <el-container>

    <el-aside :style="store.getSideTheme === 'dark' ? 'background-color: #545c64' : ''" :width="slideWidth"
              class="shadow-lg z-60">
      <el-menu
          :active-text-color="store.getTheme"
          :background-color="store.getSideTheme === 'dark' ? '#545c64' : ''"
          :collapse="isCollapse"
          :default-active="router.currentRoute.value.path"
          :router="true"
          :text-color="store.getSideTheme === 'dark' ? '#fff' : ''"
          :unique-opened="true"
          class="border-r-0"
      >
        <el-tooltip
            content="控制台"
            effect="dark"
            placement="right"
        >
          <el-menu-item index="/console">
            <el-icon>
              <Odometer/>
            </el-icon>
            <span>控制台</span>
          </el-menu-item>
        </el-tooltip>


        <SideMenu :menus="menus.data" parent-path="/"/>

      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="flex h-10 px-0 bg-gray-100 items-center justify-between border-b border-gray-300">

        <div class="inline-flex items-center justify-center ml-3">
          <el-icon v-if="!isCollapse" :color="store.getTheme" class="mr-5" @click="changeSlide">
            <Fold/>
          </el-icon>
          <el-icon v-else :color="store.getTheme" class="mr-5" @click="changeSlide">
            <Expand/>
          </el-icon>
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-for="item in router.currentRoute.value.matched">
              {{ item.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="inline-flex items-center justify-center">
          <el-avatar :size='30' :src="store.getUser.avatar" shape="square"/>
          <span class="ml-3">{{ store.getUser.nickName }}</span>
          <el-dropdown class="ml-3">
            <el-icon class="mr-4">
              <setting
              />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/profile')">个人中心</el-dropdown-item>
                <el-dropdown-item @click="store.setShowSettings(true)">布局设置</el-dropdown-item>
                <el-dropdown-item divided @click="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

      </el-header>
      <el-main class="p-0">
        <el-tabs
            v-model="router.currentRoute.value.path"
            class="border-0"
            type="card"
            @tab-remove="removeTab"
            @tab-change="changeTab"
        >
          <el-tab-pane
              v-for="item in store.getRouterHistory"
              :key="item.fullPath"
              :closable="item.closable"
              :label="item.meta.title" :name="item.fullPath" style="margin: 0px"/>

          <Settings></Settings>
          <router-view/>
        </el-tabs>

      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import {useStore} from "@/store";
import {reactive, ref} from "vue";
import {ArrowRight} from "@element-plus/icons-vue"
import {doLogout} from "@/api/login";
import {ElMessageBox, ElNotification} from "element-plus";
import {useRouter} from "vue-router";
import SideMenu from "@/components/SideMenu.vue";
import Settings from "@/components/Settings.vue";
import {getMenu} from "@/api/menu";
import {selectUserById} from "@/api/user";

const router = useRouter()

const store = useStore()

//主题风格设置弹框
const right = ref(false)

//获取导航栏状态
const isCollapse = ref(localStorage.getItem('sidebarStatus') === '1')

//定义导航栏状态
const slideWidth = ref(localStorage.getItem('sidebarStatus') === '1' ? '65px' : '180px')

//切换导航栏状态
function changeSlide() {
  isCollapse.value = !isCollapse.value
  if (isCollapse.value) {
    localStorage.setItem('sidebarStatus', '1')
    slideWidth.value = '65px'
  } else {
    localStorage.setItem('sidebarStatus', '0')
    slideWidth.value = '180px'
  }
}

const menus = reactive({
  data: []
})

//通过用户id查询菜单信息，放入store
getMenu(store.getUser.userId).then(resultMenu => {
  menus.data = resultMenu.data.data
})

//通过用户id查询用户信息，放入store
selectUserById(store.getUser.userId).then(resultUser => {
  store.setUser(resultUser.data.data)
})

//注销方法
function logout() {
  ElMessageBox.confirm('您确定要注销当前账号吗？', '警告', {
    confirmButtonText: '注销',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    doLogout().then(response => {
      ElNotification({
        title: response.data.msg,
        type: 'success',
        duration: 2000
      })
      store.setLogout()
      router.push('/login')
    })
  })
}

//移除路由标签
const removeTab = (targetName: string) => {
  if (targetName === router.currentRoute.value.path) {
    let index = store.getRouterHistory.findIndex(item => {
      if (item.fullPath === targetName) {
        return true
      }
    })
    router.push(store.getRouterHistory[index - 1].fullPath)
  }
  store.removeRouterHistory(targetName)
}

//路由标签单击
const changeTab = (targetName) => {
  router.push(targetName)
}
</script>

<style scoped>
.el-container {
  height: 100vh;
  overflow: hidden;
}
</style>
